<template>
  <div class="reply-list" v-if="detail?.srmRectifyReplyVoList?.length > 0">
    <h4 class="reply-title">整改回复</h4>
    <div v-for="(item, index) in detail.srmRectifyReplyVoList" :key="item.id">
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="回复时间">{{ item.createTime }}</el-descriptions-item>
        <el-descriptions-item label="原因分析">{{ item.cause }}</el-descriptions-item>
        <el-descriptions-item label="整改措施">{{ item.measure }}</el-descriptions-item>
        <el-descriptions-item label="整改回复附件">
          <x-upload :old-file-list="item.rectifyReplyFileVoList" :edit-flag="false" />
        </el-descriptions-item>
        <el-descriptions-item label="驳回详情" v-if="item.reject">
          <div class="reject-detail">
            <div class="top">
              <span class="create-time">{{ item.updateTime }}</span>
            </div>
            <div class="content">{{ item.reject }}</div>
          </div>
          <el-divider v-if="index !== detail.srmRectifyReplyVoList.length - 1" />
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RejectDetail',
    props: {
      detail: Object
    }
  }
</script>

<style scoped lang="scss">
  .reply-list {
    background-color: #ececec;
    border-radius: 8px;
    padding: 20px 20px 0;
    .reply-title {
      font-size: 16px;
      color: #333;
      margin: 0 0 20px;
    }

    ::v-deep .el-descriptions__body {
      background-color: inherit;
    }
  }
  ::v-deep .el-divider {
    margin-bottom: 0;
  }
  .reject-detail {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #e1e1e1;
    border-radius: 8px;

    .top {
      display: flex;
      align-items: center;
      margin: 0 0 10px;
    }
    .title,
    .create-time {
      color: #7c7c7c;
    }
  }
</style>
